<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类数据测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .debug-info {
            background-color: #f8f9fa;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
            font-size: 14px;
        }
        .category-item {
            padding: 10px;
            margin-bottom: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>分类数据测试</h1>
    
    <div class="debug-info">
        <h2>模拟分类数据</h2>
        <pre id="mockDataOutput"></pre>
    </div>
    
    <div class="debug-info">
        <h2>一级分类列表</h2>
        <div id="firstLevelCategories"></div>
    </div>
    
    <script>
        // 备用模拟数据，按照用户描述的字段规则创建
        function getMockCategories() {
            return [
                // 一级分类 (parentId = 0)
                { id: 1, name: '电子产品', parentId: 0, sort: null },
                { id: 2, name: '家居用品', parentId: 0, sort: null },
                { id: 3, name: '时尚服饰', parentId: 0, sort: null },
                
                // 二级分类 (parentId = 1, sort字段关联一级分类ID)
                { id: 4, name: '手机', parentId: 1, sort: 1 },
                { id: 5, name: '电脑', parentId: 1, sort: 1 },
                { id: 6, name: '家电', parentId: 1, sort: 1 },
                { id: 7, name: '厨房用品', parentId: 1, sort: 2 },
                { id: 8, name: '家具', parentId: 1, sort: 2 },
                { id: 9, name: '男装', parentId: 1, sort: 3 },
                { id: 10, name: '女装', parentId: 1, sort: 3 },
                
                // 三级分类
                { id: 11, name: '智能手机', parentId: 4, sort: null },
                { id: 12, name: '功能手机', parentId: 4, sort: null },
                { id: 13, name: '手机配件', parentId: 4, sort: null },
                { id: 14, name: '笔记本电脑', parentId: 5, sort: null },
                { id: 15, name: '台式机', parentId: 5, sort: null },
                { id: 16, name: '平板电脑', parentId: 5, sort: null },
                { id: 17, name: '电视', parentId: 6, sort: null },
                { id: 18, name: '冰箱', parentId: 6, sort: null },
                { id: 19, name: '洗衣机', parentId: 6, sort: null },
                { id: 20, name: '厨具', parentId: 7, sort: null },
                { id: 21, name: '餐具', parentId: 7, sort: null },
                { id: 22, name: '小家电', parentId: 7, sort: null },
                { id: 23, name: '沙发', parentId: 8, sort: null },
                { id: 24, name: '床', parentId: 8, sort: null },
                { id: 25, name: '桌椅', parentId: 8, sort: null },
                { id: 26, name: '上衣', parentId: 9, sort: null },
                { id: 27, name: '裤子', parentId: 9, sort: null },
                { id: 28, name: '外套', parentId: 9, sort: null },
                { id: 29, name: '连衣裙', parentId: 10, sort: null },
                { id: 30, name: '上衣', parentId: 10, sort: null },
                { id: 31, name: '裤装', parentId: 10, sort: null }
            ];
        }
        
        // 加载并显示分类数据
        document.addEventListener('DOMContentLoaded', function() {
            const mockData = getMockCategories();
            
            // 显示完整的模拟数据
            document.getElementById('mockDataOutput').textContent = JSON.stringify(mockData, null, 2);
            
            // 筛选一级分类
            const firstLevelCategories = mockData.filter(item => item.parentId === 0);
            
            // 显示一级分类列表
            const container = document.getElementById('firstLevelCategories');
            
            firstLevelCategories.forEach(category => {
                const item = document.createElement('div');
                item.className = 'category-item';
                item.innerHTML = `
                    <strong>ID:</strong> ${category.id}<br>
                    <strong>名称:</strong> ${category.name || '未命名分类'}<br>
                    <strong>hasName属性:</strong> ${"name" in category}<br>
                    <strong>name类型:</strong> ${typeof category.name}<br>
                    <strong>完整对象:</strong> ${JSON.stringify(category)}
                `;
                container.appendChild(item);
            });
            
            // 控制台输出调试信息
            console.log('模拟数据总数:', mockData.length);
            console.log('一级分类数量:', firstLevelCategories.length);
            console.log('一级分类详情:', firstLevelCategories);
        });
    </script>
</body>
</html>